<template>
  <div class="course-management">
    <div class="header">
      <h2 class="title">课程中心</h2>
      <div class="search-area">
        <!-- 搜索和筛选区域 -->
        <el-input
          v-model="searchQuery.keyword"
          placeholder="搜索课程名称"
          class="search-input"
          clearable
          prefix-icon="el-icon-search"
          @input="handleSearch"
        />
        <el-select v-model="searchQuery.instructor" placeholder="讲师筛选" clearable @change="handleSearch">
          <el-option
            v-for="item in instructors"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select v-model="searchQuery.timeSort" placeholder="时间排序" @change="handleSearch">
          <el-option label="最新发布" value="newest" />
          <el-option label="最早发布" value="oldest" />
        </el-select>
      </div>
    </div>

    <!-- 课程卡片列表 -->
    <div class="course-list">
      <el-card v-for="course in filteredCourses" :key="course.id" class="course-card">
        <div class="course-info">
          <div class="course-main">
            <h3>{{ course.name }}</h3>
            <p class="description">{{ course.description }}</p>
          </div>
          <div class="progress-section">
            <el-progress 
              :percentage="course.progress" 
              :status="course.progress === 100 ? 'success' : ''"
              :stroke-width="15"
            >
              <template #format>
                <span>{{ course.progress }}% 完成</span>
              </template>
            </el-progress>
          </div>
          <div class="course-meta">
            <el-tag size="small">{{ course.instructor }}</el-tag>
            <span class="duration"><i class="el-icon-time"></i> {{ course.duration }}分钟</span>
            <span class="enrollment-count">
              <i class="el-icon-user"></i> {{ course.currentEnrollment }}/{{ course.capacity }}人
            </span>
            <span class="date">发布日期：{{ course.publishDate }}</span>
          </div>
          <div class="course-action">
            <el-button 
              :type="course.enrolled ? 'danger' : 'primary'"
              size="small"
              @click="handleEnrollment(course)"
            >
              {{ course.enrolled ? '退选课程' : '选择课程' }}
            </el-button>
            <el-button 
              v-if="course.enrolled"
              type="success" 
              size="small"
              @click="goToFeedback(course)"
            >
              课程反馈
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 空状态展示 -->
    <el-empty
      v-if="filteredCourses.length === 0"
      description="暂无符合条件的课程"
    />

    <!-- 添加反馈对话框 -->
    <el-dialog
      title="课程反馈"
      v-model="feedbackDialogVisible"
      width="50%"
      class="feedback-dialog"
    >
      <el-form :model="feedbackForm" ref="feedbackForm" :rules="feedbackRules">
        <el-form-item label="课程评分" prop="rating">
          <el-rate
            v-model="feedbackForm.rating"
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="反馈内容" prop="content">
          <el-input
            type="textarea"
            v-model="feedbackForm.content"
            :rows="4"
            placeholder="请输入您对课程的建议和反馈"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="feedbackDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CourseManagement',
  data() {
    return {
      courses: [
        {
          id: 1,
          name: '前端开发基础',
          description: '学习HTML、CSS和JavaScript的基础知识，掌握现代前端开发技能。',
          duration: 120,
          instructor: '张老师',
          publishDate: '2024-03-15',
          enrolled: true,
          progress: 45,
          capacity: 60,
          currentEnrollment: 45
        },
        {
          id: 2,
          name: 'Vue.js 实战教程',
          description: '深入学习Vue.js框架，从基础到高级特性的完整课程。',
          duration: 180,
          instructor: '李老师',
          publishDate: '2024-03-14',
          enrolled: false,
          progress: 0,
          capacity: 50,
          currentEnrollment: 50
        },
        {
          id: 3,
          name: '后端开发入门',
          description: 'Node.js基础教程，包括Express框架和数据库操作。',
          duration: 150,
          instructor: '王老师',
          publishDate: '2024-03-13',
          enrolled: false,
          progress: 0,
          capacity: 40,
          currentEnrollment: 25
        }
      ],
      searchQuery: {
        keyword: '',
        instructor: '',
        timeSort: 'newest'
      },
      instructors: ['张老师', '李老师', '王老师', '赵老师'],
      feedbackDialogVisible: false,
      feedbackForm: {
        courseId: null,
        courseName: '',
        rating: 0,
        content: ''
      },
      feedbackRules: {
        rating: [
          { required: true, message: '请对课程进行评分', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写反馈内容', trigger: 'blur' },
          { min: 10, message: '反馈内容至少10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    filteredCourses() {
      let result = [...this.courses]
      
      // 关键词搜索
      if (this.searchQuery.keyword) {
        result = result.filter(course => 
          course.name.toLowerCase().includes(this.searchQuery.keyword.toLowerCase())
        )
      }
      
      // 讲师筛选
      if (this.searchQuery.instructor) {
        result = result.filter(course => 
          course.instructor === this.searchQuery.instructor
        )
      }
      
      // 时间排序
      result.sort((a, b) => {
        const dateA = new Date(a.publishDate)
        const dateB = new Date(b.publishDate)
        return this.searchQuery.timeSort === 'newest' 
          ? dateB - dateA 
          : dateA - dateB
      })
      
      return result
    }
  },
  methods: {
    handleSearch() {
      // 搜索逻辑可以在这里扩展
    },
    handleEnrollment(course) {
      if (course.enrolled) {
        if (confirm('确认退选该课程吗？退选后课程进度将被清零')) {
          if (!course.hasOwnProperty('currentEnrollment')) {
            course.currentEnrollment = 0;
          }
          course.enrolled = false;
          course.progress = 0;
          course.currentEnrollment = Math.max(0, course.currentEnrollment - 1);
          alert('已退选课程');
        }
      } else {
        if (course.currentEnrollment >= course.capacity) {
          alert('该课程已满员');
          return;
        }
        course.enrolled = true;
        course.progress = 0;
        if (!course.hasOwnProperty('currentEnrollment')) {
          course.currentEnrollment = 0;
        }
        course.currentEnrollment++;
        alert('选课成功');
      }
    },
    goToFeedback(course) {
      this.feedbackForm.courseId = course.id;
      this.feedbackForm.courseName = course.name;
      this.feedbackForm.rating = 0;
      this.feedbackForm.content = '';
      this.feedbackDialogVisible = true;
    },
    submitFeedback() {
      this.$refs.feedbackForm.validate((valid) => {
        if (valid) {
          alert('反馈提交成功！');
          this.feedbackDialogVisible = false;
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.course-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  margin-bottom: 24px;
}

.title {
  margin: 0 0 20px 0;
  color: #303133;
}

.search-area {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.course-card {
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.course-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-main h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.description {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 13px;
  color: #909399;
}

.duration {
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-action {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-tag {
  background-color: #f0f9eb;
  color: #67c23a;
  border: none;
}

:deep(.feedback-dialog) {
  min-width: 600px;
}

:deep(.feedback-dialog .el-dialog__body) {
  padding: 0;
}

.progress-section {
  margin: 10px 0;
}

.enrollment-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #409EFF;
}
</style>